﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../common/header.ftl">

    <script>
        $(function () {
            //自定义手机号验证
            jQuery.validator.addMethod("isPhone", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $("#editForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength:2
                    },
                    password:{
                        required:true
                    },
                    repwd:{
                        required:true,
                        equalTo:"#pwd"
                    },
                    phone:{
                        required:true,
                        isPhone:true
                    },
                    age:{
                        required:true,
                        digits: true
                    }

                },
                messages: {
                    name: {
                        required: "用户名不能为空",
                        minlength:"至少输入两个字符",
                    },
                    password:{
                        required:"密码不能为空"
                    },
                    repwd:{
                        required:"再次输入的密码也不能为空",
                        equalTo:"密码不一致"
                    },
                    phone:{
                        required:"不能为空",
                        isPhone:"请输入正确的手机号码"
                    },
                    age:{
                        required:"不能为空",
                        digits:"必须为正整数"
                    }

                }


            });
        })
        ;
    </script>
</head>
<body>

<div class="container-fluid" style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-lg-2">
	    <#assign menu="employee">
            <#include "../common/menu.ftl">
        </div>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-head-line">员工编辑</h1>
                </div>
            </div>
            <div class="row col-lg-10">
                <form class="form-horizontal" action="/employee/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" value="${(entity.id)!}" name="id">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">用户名：</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="name" value="${(entity.name)!}"
                                   placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">性别：</label>
                        <div class="col-lg-4">
                            <select class="form-control" name="gender">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                        <script>
                            $("#editForm select[name='gender']").val(${(entity.gender)!});
                        </script>
                    </div>
                    <#if !entity??>

                        <div class="form-group">
                            <label class="col-lg-2 control-label">密码：</label>
                            <div class="col-lg-4">
                                <input type="password" class="form-control" id="pwd" name="password"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">验证密码：</label>
                            <div class="col-lg-4">
                                <input type="password" class="form-control" name="repwd" placeholder="再输入一遍密码">
                            </div>
                        </div>
                    </#if>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">电话：</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="phone" value="${(entity.phone)!}"
                                   placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">年龄：</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="age" value="${(entity.age)!}"
                                   placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">部门：</label>
                        <div class="col-lg-4">
                            <select class="form-control" name="dept.id">
                            <#list depts as d>
                                <option value="${(d.id)!}">${(d.name)!}</option>
                            </#list>
                            </select>
                        </div>
                        <script>
                            //部门回显
                            $(function () {
                                $("[name='dept.id']").val(${(entity.dept.id)!});
                            });
                        </script>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">授予管理员：</label>
                        <label class="checkbox-inline" style="margin-left: 15px;">
                            <input type="checkbox" id="admin" name="admin">
                        </label>
                    </div>
                    <div class="form-group" id="role">
                        <div class="row" style="margin-top: 10px">
                            <div class="col-lg-3 col-lg-offset-1">
                                <div>
                                    <label class="control-label">系统角色：</label>
                                </div>
                            <#--显示系统中所有的角色-->
                                <select multiple class="form-control allRoles" size="20">
                                    <#list roles as role>
                                        <option value="${(role.id)!}">${(role.name)!}</option>
                                    </#list>
                                </select>
                            </div>
                            <div class="col-lg-1" style="margin-top: 60px;" align="center">
                                <div>
                                    <a type="button" class="btn btn-info  " style="margin-top: 10px"
                                       onclick="moveSelected('allRoles', 'selfRoles')">&nbsp;&gt;&nbsp;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveSelected('selfRoles', 'allRoles')">&nbsp;&lt;&nbsp;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveAll('allRoles', 'selfRoles')">&gt;&gt;</a>
                                    <br>
                                    <a type="button" class="btn btn-info " style="margin-top: 10px"
                                       onclick="moveAll('selfRoles', 'allRoles')">&lt;&lt;</a>
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div>
                                    <label class="control-label">授予角色：</label>
                                </div>
                                <select multiple class="form-control selfRoles" size="20" name="ids">
                                <#--显示当前用户拥有的角色-->
                                     <#list (entity.roles)! as role>
                                        <option value="${(role.id)!}">${(role.name)!}</option>
                                     </#list>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-offset-1 col-lg-6">
                            <button id="btn_submit" type="button" class="btn btn-success">
                                <span class="glyphicon glyphicon-saved"></span> 保存
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    // 表单提交
    $(function () {
        $("#btn_submit").click(function () {
            $("[name='ids'] option").prop("selected", true);
            $("#editForm").submit();
        });

        var role;
        //    回显超管
        //     entity.admin?string("true","false")
        if (${(entity.admin?string('1','0'))!0}) {
            $("#admin").prop("checked", true);
            role = $("#role").remove();
        }


        //    超管处理
        $("#admin").click(function () {
            if (this.checked) {
                role = $("#role").remove();
            } else {
                $("#admin").closest("div").after(role)
            }
        });

        //    选项去重
        $.each($(".selfRoles option"), function (index, ele) {
            $(".allRoles option[value='" + ele.value + "']").remove();
        });


    });

    //移动所有角色
    function moveAll(srcId, targId) {
        $("." + srcId + " option").appendTo("." + targId);
    }

    //    移动选中的角色
    function moveSelected(srcId, targId) {
        $("." + srcId + " option:selected").appendTo("." + targId);
    }


</script>
</body>
</html>